<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user" label="会员账号">
            <a-input allow-clear v-model="searchForm.user" placeholder="会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input allow-clear v-model="searchForm.uid" placeholder="会员UID" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="number" label="证件号码">
            <a-input allow-clear v-model="searchForm.number" placeholder="请输入" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="name" label="证件姓名">
            <a-input allow-clear v-model="searchForm.name" placeholder="请输入" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="area" label="地区">
            <sa-select v-model="searchForm.area" :data="AREA_TYPE"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select v-model="searchForm.state" :data="paramsData.state"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="实名类型">
            <sa-select v-model="searchForm.reg_type" :data="paramsData.reg_type"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="证件类型">
            <sa-select v-model="searchForm.type" :data="paramsData.type"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
      </template>
      <template #user="{ record }">
        <p>UID:{{ record.user_id }}</p>
        <p>账号:{{ record.user_name }}</p>
        <p>地区:{{ record.area_text }}</p>
        <p v-if="record.number">电话号码:{{ record.mobile }}</p>
        <p v-if="record.area == 2">类型:{{ record.reg_type_text }}</p>
      </template>
      <template #auth="{ record }">
        <div v-if="record.reg_type == 2">
          <a-tooltip :content="record.name">
              <p >公司名称: {{ record.name }}</p>
            </a-tooltip>
            <a-tooltip :content="record.number">
              <p >统一税务编码: {{ record.number }}</p>
            </a-tooltip>
            <a-tooltip :content="record?.company?.fuzeren">
              <p >法人姓名: {{record?.company?.fuzeren }}</p>
            </a-tooltip>
            <a-tooltip :content="record?.company?.fuzeren_card">
              <p >法人身份证: {{ record?.company?.fuzeren_card }}</p>
            </a-tooltip>
        </div>
        <div v-else>
          <p>姓名: {{ record.name }}</p>
          <p class="over_text">{{ record.type_text }}: {{ record.number }}</p>
        </div>
      </template>
      <template #state_text="{ record }">
        <div v-if="record.state==2">
          <p>状态:{{ record.state_text }}</p>
          <p>审核备注:{{ record.message }}</p>
          <p>审核人:{{ record.admin_name }}</p>
          <p>审核时间:{{ record.apply_time }}</p>
        </div>
        <div v-else-if="record.state==2">
          <p>状态:{{ record.state_text }}</p>
          <p>审核人:{{ record.admin_name }}</p>
          <p>审核时间:{{ record.apply_time }}</p>
        </div>
        <div v-else>
          <p>状态:{{ record.state_text }}</p>
        </div>
      </template>
      <template #front="{ record }">
          <div v-if="record.info && record.info.main_photo">
            <a-image style="width: 80px;max-height:140px;" fit="cover" :src="record?.info?.main_photo"></a-image>
          </div>
          <div v-else>未上传</div>

      </template>
      <template #back="{ record }">
          <div v-if="record.info && record.info.secondary_photo">
            <a-image style="width: 80px;max-height:140px;" fit="cover" :src="record?.info?.secondary_photo"></a-image>
          </div>
          <div v-else>未上传</div>

      </template>
      <template #item="{ record }">
        <div v-if="record.auth_sign">
          <div style="color:#4c6ef5" @click="toHQ(record.auth_sign)">签约文件</div>
        </div>
        <div v-else>未上传</div>
      </template>
      <template #other="{ record }">
        <div>申请时间: {{ record.create_time }}</div>
        <div>更新时间: {{ record.update_time }}</div>
        <div v-if="record.birthday">出生/注册日期: {{ record.birthday }}</div>
      </template>
      <template #operationAfterExtend="{ record }">
        <!-- <div v-if="record.area == 0">
          <a-button v-if="record.deal_sign == 1" class="yellow_color"  type="primary" size="mini" shape="round" @click="handleDetail('check', record)">审核合约书 </a-button>
          <a-button  type="primary" size="mini" shape="round" v-else @click="handleDetail('detail', record)">详情 </a-button>
        </div>
        <div v-if="record.area != 0">
          <a-button v-if="record.state == 0" class="yellow_color"  type="primary" size="mini" shape="round" @click="handleDetail('check_gj', record)">审核 </a-button>
          <a-button v-if="record.apply_state == 1" class="red_color_danger" type="primary" size="mini" shape="round" @click="handleDetail('edit', record)">申请修改 </a-button>
        
        </div> -->
        <div v-if="record.state<1 && record.area==2">
          <a-button class="yellow_color"  type="primary" size="mini" shape="round" @click="handleDetail('check_gj', record)">审核 </a-button>
        </div>
        <div v-if="(record.state==1 || record.state==2) && record.area==2">
          <a-popconfirm  content="确认回退到待审核状态吗?"
            position="bottom" @ok="handleDetail('recheck', record)">
            <a-button type="primary" size="mini" class="yellow_color"  shape="round">重新审核 </a-button>
          </a-popconfirm>
        </div>
      </template>
      
    </sa-table>
    <!-- 编辑表单 -->
    <detail-form ref="detailRef" @success="refresh" />
    <check ref="checkRef" @success="refresh" />
    <a-modal v-model:visible="visible" title="请输入谷歌验证码" @before-ok="recheck" @cancel="visible=false">
   
      <a-form-item label="谷歌验证码" required>
        <a-input v-model="checkInfo.google_code" placeholder="请输入" />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import check from './check.vue'
const visible=ref(false)
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import ENUMS from '@/utils/enums'
import detailForm from './detail.vue'
import tool from '@/utils/tool'
const crudRef = ref()
const detailRef = ref()
const   AREA_TYPE=[
        {title:'全部',value:99},
        {title:'外包版',value:2},
        {title:'国际版',value:1},  
    ]
const checkRef = ref()
const searchForm = ref({
  state: 99,
  reg_type: 99,
  area: 2,
  type:99,
  name: '',
  number: '',
  user: '',
  uid:'',
})
const checkInfo = ref({
  google_code: '',
  id:'',
})
const options = reactive({
  api: memberApi.auth_list,//表格数据接口
  operationColumnWidth: 120,//操作欄
  columnAlign: 'left',
  pageSimple: false,
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: '会员', dataIndex: 'user', width: 180 },
  { title: '认证信息', dataIndex: 'auth', width: 250 },
  { title: '状态', dataIndex: 'state_text', width: 150 },
  { title: '正面照', dataIndex: 'front', width: 200, align: 'center' },
  { title: '反面照', dataIndex: 'back', width: 200, align: 'center' },
  { title: '资料查看', dataIndex: 'item', width: 180, align: 'center' },
  { title: '其他', dataIndex: 'other', width: 250 },
  { title: '审核管理员', dataIndex: 'admin_name', width: 150, align: 'center' },
])
const recheck = async(done) => { 
  if (!checkInfo.value.google_code) {
    Message.error('请输入谷歌验证码')
    done(false)
    return false
  } else { 
    const { data } = await memberApi.member_auth_recheck(checkInfo.value)
    Message.success('操作成功')
    visible.value = false
    done(true)
    refresh()
  }
    
}
const handleDetail = (type, data) => {
  if (type == 'check_gj') {
    checkRef.value?.open(type, data)
  } else if (type == 'recheck') { 
    checkInfo.value.id=data.id
    visible.value = true
  }else {
    detailRef.value?.open(type, data)
  }


}
const toHQ = (url) => {
  url = url.replace('width=750', 'width=5000')
  url = url.replace('height=750', 'height=5000')
  window.open(url)
}

const initPage = async () => { }
const resetSearch = () => {
  searchForm.value.date = ''
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const paramsData = ref({})
// 获取角色组
const getParams = async () => {
  const { data } = await memberApi.auth_list_params()
  paramsData.value = { ...data }
  paramsData.value.state = tool.simpleTransformArray(data.state)
  paramsData.value.state.unshift({ title: '全部', value: 99 })
  paramsData.value.reg_type = tool.simpleTransformArray(data.reg_type)
  paramsData.value.reg_type.unshift({ title: '全部', value: 99 })
  paramsData.value.type = tool.simpleTransformArray(data.type)
  paramsData.value.type.unshift({ title: '全部', value: 99 })
  console.log(11, paramsData.value);

}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
